{% extends "baseUser.html" %}

{% block navbar %}
	{{ super() }}
	<div id="fb-root"></div>
	<script>(function(d, s, id) {
	  var js, fjs = d.getElementsByTagName(s)[0];
	  if (d.getElementById(id)) return;
	  js = d.createElement(s); js.id = id;
	  js.src = "//connect.facebook.net/es_LA/all.js#xfbml=1";
	  fjs.parentNode.insertBefore(js, fjs);
	}(document, 'script', 'facebook-jssdk'));</script>
{% endblock %}

{% block userData %}

      <div class="row row-offcanvas row-offcanvas-right">

        <div class="col-xs-12 col-sm-9">
          <p class="pull-right visible-xs">
            <button type="button" class="btn btn-primary btn-xs" data-toggle="offcanvas">Toggle nav</button>
          </p>
          <div class="jumbotron">
            <h1>Venta productos</h1>
            <p>Encuentre aquí todo el equipamiento e indumentaria para tus ejercicios diarios</p>
          </div>
		<div class="row">
		  <div class="col-sm-6 col-md-4">
		    <div class="thumbnail">
		      <img src="/static/demo/img/remera_termica_hombre.jpg" alt="Smiley face" height="50" width="150">
		      <div class="caption">
		        <h3>Remera térmica hombre</h3>
		        <p>$250 o 300pts</p>
				<p>
				 <label>Talle</label>
				 <select id = "myList">
				   <option value = "1">S</option>
				   <option value = "2">M</option>
				   <option value = "3">L</option>
				 </select>
				</p>
		        <p><a href="productosChango" class="btn btn-primary" role="button">Comprar</a>
		      </div>
		    </div>
		  </div>
		  <div class="col-sm-6 col-md-4">
		    <div class="thumbnail">
		      <img src="/static/demo/img/remera_termica_hombre.jpg" alt="Smiley face" height="50" width="150">
		      <div class="caption">
		        <h3>Remera térmica hombre</h3>
		        <p>$250 o 300pts</p>
				<p>
				 <label>Talle</label>
				 <select id = "myList">
				   <option value = "1">S</option>
				   <option value = "2">M</option>
				   <option value = "3">L</option>
				 </select>
				</p>
		        <p><a href="productosChango" class="btn btn-primary" role="button">Comprar</a>
		      </div>
		    </div>
		  </div>
		  <div class="col-sm-6 col-md-4">
		    <div class="thumbnail">
		      <img src="/static/demo/img/remera_termica_hombre.jpg" alt="Smiley face" height="50" width="150">
		      <div class="caption">
		        <h3>Remera térmica hombre</h3>
		        <p>$250 o 300pts</p>
				<p>
				 <label>Talle</label>
				 <select id = "myList">
				   <option value = "1">S</option>
				   <option value = "2">M</option>
				   <option value = "3">L</option>
				 </select>
				</p>
		        <p><a href="productosChango" class="btn btn-primary" role="button">Comprar</a>
		      </div>
		    </div>
		  </div>
		</div><!--/row-->
		<div class="row">
		  <div class="col-sm-6 col-md-4">
		    <div class="thumbnail">
		      <img src="/static/demo/img/remera_termica_hombre.jpg" alt="Smiley face" height="50" width="150">
		      <div class="caption">
		        <h3>Remera térmica hombre</h3>
		        <p>$250 o 300pts</p>
				<p>
				 <label>Talle</label>
				 <select id = "myList">
				   <option value = "1">S</option>
				   <option value = "2">M</option>
				   <option value = "3">L</option>
				 </select>
				</p>
		        <p><a href="productosChango" class="btn btn-primary" role="button">Comprar</a>
		      </div>
		    </div>
		  </div>
		  <div class="col-sm-6 col-md-4">
		    <div class="thumbnail">
		      <img src="/static/demo/img/remera_termica_hombre.jpg" alt="Smiley face" height="50" width="150">
		      <div class="caption">
		        <h3>Remera térmica hombre</h3>
		        <p>$250 o 300pts</p>
				<p>
				 <label>Talle</label>
				 <select id = "myList">
				   <option value = "1">S</option>
				   <option value = "2">M</option>
				   <option value = "3">L</option>
				 </select>
				</p>
		        <p><a href="productosChango" class="btn btn-primary" role="button">Comprar</a>
		      </div>
		    </div>
		  </div>
		  <div class="col-sm-6 col-md-4">
		    <div class="thumbnail">
		      <img src="/static/demo/img/remera_termica_hombre.jpg" alt="Smiley face" height="50" width="150">
		      <div class="caption">
		        <h3>Remera térmica hombre</h3>
		        <p>$250 o 300pts</p>
				<p>
				 <label>Talle</label>
				 <select id = "myList">
				   <option value = "1">S</option>
				   <option value = "2">M</option>
				   <option value = "3">L</option>
				 </select>
				</p>
		        <p><a href="productosChango" class="btn btn-primary" role="button">Comprar</a>
		      </div>
		    </div>
		  </div>
		</div><!--/row-->
        </div><!--/span-->

        <div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar" role="navigation">
          <div class="list-group">
          <ul class="list-group">
			  <li class="list-group-item">
			    <span class="badge">14</span>
			    <p><a href="productosChango">Carrito</a>
			  </li>
		</ul>
            <a href="#" class="list-group-item active">Remeras</a>
            <a href="#" class="list-group-item">Pantalones</a>
            <a href="#" class="list-group-item">Calzado</a>
            <a href="#" class="list-group-item">Medias</a>
            <a href="#" class="list-group-item">Accesorios</a>
            <a href="#" class="list-group-item">Bolsos</a>
          </div>
        </div><!--/span-->
      </div><!--/row-->

      <hr>

    </div><!--/.container-->

{% block js_footer %}
	<script src="/static/fullcalendar-1.6.4/fullcalendar/fullcalendar.js"></script>
    <script src="/static/xcharts-0.3.0/xcharts.js"></script>
    <script src="/static/d3.v3/d3.v3.js"></script>
    <script src="/static/jquery-extra/jquery.placeholder.min.js"></script>
    <script src="/static/jquery-extra/jquery.autosize.min.js"></script>
    <script src="/static/jquery-extra/jquery.migrate-1.2.1.js"></script>
	<script src="/static/jquery-ui-1.10.3.custom/js/jquery-ui-1.10.3.custom.js"></script>
	
	<script src="/static/flot/jquery.flot.stack.js"></script>
	<script src="/static/flot/jquery.flot.js"></script>
	<script src="/static/flot/jquery.flot.pie.js"></script>
	<script src="/static/flot/jquery.flot.stack.js"></script>
	<script src="/static/flot/jquery.flot.resize.js"></script>
	<script src="/static/flot/jquery.flot.time.js"></script>
	
	<script src="/static/jquery-extra/jquery.sparkline.js"></script>
	<script src="/static/jquery-extra/core.min.js"></script>

    <script src="/static/demo/dashboard_data.js"></script>
    
    <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="../../dist/js/bootstrap.min.js"></script>
    <script src="offcanvas.js"></script>
    
{% endblock %}

{% endblock %}
